import React from 'react';
// 密码登录

// 引入组件库组件
import { LockOutlined, UserOutlined, KeyOutlined } from '@ant-design/icons';
import { Button, Form, Input, message, Space } from 'antd';

// 引入验证码组件
import Captcha from '@/components/Captcha';

// 引入状态hook
import { useState } from 'react';

// 引入密码登录接口
import { tologin } from '@/api/login'

// 导入两个两个hook 用来操作redux 
import { useDispatch } from 'react-redux';

// 导入路由的相关的hook
import { useHistory } from 'react-router-dom'

// 导入 hook 钩子 ref 
import { useRef } from 'react'

const Mima = () => {

  // 定义验证码携带的初始key
  let [key, setKey] = useState('')

  // 定义父传子的savekey方法
  let savekey = (key) => {
    setKey(key)
  }

  // 创建dispacth方法
  let dispatch = useDispatch()

  // 创建his对象，相当于类组件中的this.props.history
  let his = useHistory()

  // 获取form 表单实例(antd form 表单提供的方法)
  let [form] = Form.useForm();

  // 创建ref对象
  let ref1 = useRef()

  // 登录成功执行
  let onFinish = (values) => {
    //console.log('1', values);
    // 将key 属性添加到 values 对象中
    values.key = key
    // 调用登录接口
    tologin(values).then(res => {
      //console.log('res', res);
      // 1.jwt 已经在响应拦截器中存到本地了
      // 2.将acl存到redux
      if (res.data.errNo == 0) {
        // 登陆成功
        dispatch(
          {
            type:'updateacl',
            payload:res.data.context.acl
          }
        )
        // 提示登陆成功
        message.success('登陆成功',1,()=>{
          // 3.跳转到首页
          his.push('/dashboard')
        })
      }
    })
  };

  return (
    <div>
      <Form
        name="mima"
        className="login-form"
        initialValues={{
          remember: true,
        }}
        onFinish={onFinish}
      >
        <Form.Item
          name="username"
          rules={[
            {
              required: true,
              message: '请输入用户名',
            },
          ]}
        >
          <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[
            {
              required: true,
              message: '请输入密码',
            },
          ]}
        >
          <Input
            prefix={<LockOutlined className="site-form-item-icon" />}
            type="password"
            placeholder="密码"
          />
        </Form.Item>
        <Space>
          <Form.Item
            name="captcha"
            rules={[
              {
                required: true,
                message: '请输入验证码',
              },
            ]}
          >
            <Input prefix={<KeyOutlined className="site-form-item-icon" />} placeholder="图形验证码" />
          </Form.Item>
          <Form.Item>
            <Captcha savekey={savekey}></Captcha>
          </Form.Item>
        </Space>

        <Form.Item>
          <Button type="primary" htmlType="submit" block>
            登录
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}

export default Mima;
